<template>
  <div
    class="row q-pt-sm justify-end q-gutter-x-md bg-panda-base-dark text-panda-text-dark"
    style="width: 100%;"
  >
    <div>
      <q-input
        outlined
        disable
        dense
        v-model.number="total"
        type="number"
        style="width:130px;"
        color="panda-text-light"
        bg-color="panda-light-light"
      >
        <template v-slot:before>
          <span class="text-panda-text-dark">总数</span>
        </template>
      </q-input>
    </div>
    <div>
      <q-select
        outlined
        dense
        style="width:130px;"
        @input="handle_pageSize_change"
        v-model="pageSize"
        :options="pageSizeOptions"
        color="panda-text-light"
        bg-color="panda-light-light"
        popup-content-class="bg-panda-base-dark text-panda-text-dark"
      >
        <template v-slot:before>
          <span class="text-panda-text-dark">每页</span>
        </template>
      </q-select>
    </div>
    <div>
      <q-pagination
        v-model="currentPage"
        color="panda-text-light"
        text-color="panda-text-light"
        :input-class="`text-panda-text-dark`"
        :max="maxPageNum"
        :min="1"
        input
      ></q-pagination>
    </div>
    <div>
      <q-input
        outlined
        bottom-slots
        dense
        v-model.number="currentPage_inputed"
        :max="maxPageNum"
        style="width:140px;"
        color="panda-text-light"
        bg-color="panda-light-light"
      >
        <template v-slot:before>
          <span class="text-panda-text-dark">跳转至</span>
        </template>
        <template v-slot:after>
          <span
            class="panda-btn-light-dense text-center no-padding"
            @click="goto_input_page"
            style="width:26px;height: 22px; "
          >GO</span>
          <span class="text-panda-text-dark q-ml-sm">页</span>
        </template>
      </q-input>
    </div>
    <!-- import pandaPagination from "src/components/pagination/pagination.vue" -->
    <!-- <panda-pagination
                :total="total"
                :tabledata_can_request="tabledata_can_request"
                :queryform_form_changed="queryform_form_changed"
                @handle_currentPage_change="handle_currentPage_change"
                @init_tabledata="init_tabledata"
            
    ></panda-pagination>-->
  </div>
</template>
<style lang="stylus" scoped></style>
<script>
/**
   需求分析 ：
   传入： 总数   表格数据是否可请求 tabledata_can_request  当前页
   传出： 一切都处理好以后  输出 当前页数 和叶容量 ，并触发 请求  

   因为，前后翻页可能存在 延时， 再请求后，需在引入页面 判断 返回页数和当前页
   所以 ，需要将 当前页数进行 双向传输

   传入当前页 原因是 查询条件改变 

 */
import paginationmixin from "src/mixins/module/paginationmixin.js";
import routerCacheMixin from 'src/mixins/routerCache/routerCache.js'
export default {
  mixins: [paginationmixin,routerCacheMixin],
  data() {
    return {
      pageSizeOptions: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      currentPage_buffer: "",
      maxpage_request: 0,
      timer: "",
      currentPage_inputed: 1,
      
      maxPageNum: 1,
      pagination: {
        sortBy: "",
        descending: false,
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 0
      }
    };
  },
  props: {
    total: 0,
    queryform_form_changed: false,
    tabledata_can_request: true
  },
  methods: {
    goto_input_page() {
      let n = this.currentPage_confirm(this.currentPage_inputed);
      this.currentPage_inputed = n;
      if (n != this.currentPage) {
        // 输入页数 和当前页数不同
        this.setTimeout_request(n);
        
      }
    },

    currentPage_confirm(n) {
      //  最大值请求次数限制
      if (n > this.maxPageNum) {
        this.maxpage_request++;
      } else {
        this.maxpage_request = 0;
      }
      if (Number.isNaN(Number(n))) {
        n = 1;
      }
      n = n <= 0 ? 1 : n;
      n = n >= this.maxPageNum ? Number(this.maxPageNum) : n;

      return n;
    },

    handle_currentPage_change() {
      let n = this.currentPage_confirm(this.currentPage);
      if (this.maxpage_request <= 1) {
        this.setTimeout_request(n);
      }
    },
    setTimeout_request(page) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$emit("handle_currentPage_change", Number(page));



        this.currentPage_inputed = page;
        this.initPageSizeAndCurrentPage(this.pageSize, Number(page));
      }, 300);
    }
  }
};
</script>